<template>
	<cl-crud @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-flex1 />
			<cl-search-key />
		</el-row>

		<el-row>
			<cl-table
				:props="{
					'default-sort': {
						prop: 'createTime',
						order: 'descending'
					}
				}"
				:columns="[
					{
						label: 'LOGO',
						prop: 'logo',
						align: 'center'
					},
					{
						label: '名称',
						prop: 'name',
						align: 'center'
					},
					{
						label: '描述',
						prop: 'description',
						align: 'center'
					},
					{
						label: '下载地址',
						prop: 'downloadUrl',
						align: 'center'
					},
					{
						prop: 'type',
						label: '类型',
						align: 'center'
					},
					{
						prop: 'devUserId',
						label: '开发者ID',
						align: 'center'
					},
					{
						prop: 'version',
						label: '版本号',
						align: 'center'
					},
					{
						prop: 'versionDesc',
						label: '版本描述',
						align: 'center'
					},
					{
						prop: 'appId',
						label: '插件ID',
						align: 'center'
					},
					{
						prop: 'platform',
						label: '平台',
						align: 'center'
					},
					{
						prop: 'keyWords',
						label: '关键字',
						align: 'center'
					},
					{
						label: '状态',
						prop: 'isEnable',
						align: 'center'
					},
					{
						prop: 'createTime',
						label: '创建时间',
						align: 'center',
						sortable: true
					},
					{
						prop: 'updateTime',
						label: '更新时间',
						align: 'center',
						sortable: true
					},
					{
						align: 'center',
						type: 'op',
						layout: ['slot-readme-btn', 'slot-release-history-btn'],
						fixed: 'right',
						width: '130px'
					}
				]"
			>
				<!-- logo-->
				<template #column-logo="{scope}">
					<el-image
						fit="cover"
						lazy
						:src="scope.row.logo + '?x-oss-process=image/resize,h_100'"
						:preview-src-list="[scope.row.logo]"
						:style="{
							height: '40px',
							width: '40px'
						}"
					></el-image>
				</template>

				<!-- 下载地址-->
				<template #column-downloadUrl="{scope}">
					<a class="a-style" @click="linkDownload(scope.row.downloadUrl)">点击下载</a>
				</template>

				<!-- 类型 -->
				<template #column-type="{scope}">
					<el-tag v-if="scope.row.type == 0" size="small" effect="plain" type
						>系统</el-tag
					>
					<el-tag v-if="scope.row.type == 1" size="small" effect="plain" type
						>官方</el-tag
					>
					<el-tag v-if="scope.row.type == 2" size="small" effect="plain" type="success"
						>开发者</el-tag
					>
				</template>

				<!-- 状态 -->
				<template #column-isEnable="{scope}">
					<el-switch
						v-model="scope.row.offShelf"
						active-color="#13ce66"
						:active-value="1"
						:inactive-value="0"
						@change="setEnable(scope.row)"
					>
					</el-switch>
				</template>

				<!-- 简介 -->
				<template #slot-readme-btn="{scope}">
					<el-button type="text" size="mini" @click="showReadMe(scope.row)"
						>简介</el-button
					>
				</template>

				<!-- 历史版本 -->
				<template #slot-release-history-btn="{scope}">
					<el-button
						v-permission="$service.app.release.permission.history"
						type="text"
						size="mini"
						@click="showHistory(scope.row)"
						>历史版本</el-button
					>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<cl-pagination />
		</el-row>

		<el-dialog title="应用简介" :visible.sync="dialogReadMe" v-if="dialogReadMe">
			<div id="readmeContent"></div>
		</el-dialog>

		<el-dialog title="历史版本" :visible.sync="dialogTableHistory">
			<el-table :data="toHistory" stripe>
				<el-table-column property="name" label="名称"></el-table-column>
				<el-table-column property="description" label="描述"></el-table-column>
				<el-table-column property="version" label="版本号"></el-table-column>
				<el-table-column property="versionDesc" label="版本描述"></el-table-column>
				<el-table-column property="createTime" label="创建时间"></el-table-column>
			</el-table>
		</el-dialog>
	</cl-crud>
</template>

<script>
import marked from "marked";
import axios from "axios";
export default {
	data() {
		return {
			toHistory: [],
			dialogTableHistory: false,
			dialogReadMe: false
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.app.release).done();

			app.refresh();
		},

		showHistory(e) {
			this.dialogTableHistory = true;
			this.$service.app.release.history({ appId: e.appId }).then((res) => {
				this.toHistory = res;
			});
		},

		showReadMe(e) {
			this.dialogReadMe = true;
			let url = e.readme;
			if (typeof url == "undefined" || url == null || url == "") {
				return;
			}
			axios
				.get(url)
				.then((res) => {
					document.getElementById("readmeContent").innerHTML = marked(res || "");
				})
				.catch((err) => {
					this.$message.error(err);
				});
		},

		setEnable(e) {
			let status = e.offShelf == 1 ? true : false;
			this.$service.app.release
				.enable({
					id: e.id,
					offShelf: status
				})
				.catch((err) => {
					e.offShelf = e.offShelf == 1 ? 0 : 1;
					this.$message.error(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.a-style {
	color: #0500ee;
	cursor: pointer;
	text-decoration: underline;
}
</style>
